<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="8">
        <!-- <el-card>
          <div slot="header">生产待办</div>
          <ul class="production">
            <li>
              <span class="number">0</span>
              <span>待配种</span>
            </li>
            <li>
              <span class="number">2</span>
              <span>待妊娠</span>
            </li>
            <li>
              <span class="number">0</span>
              <span>待分娩</span>
            </li>
            <li>
              <span class="number">5</span>
              <span>待断奶</span>
            </li>
            <li>
              <span class="number">0</span>
              <span>待免疫</span>
            </li>
          </ul>
        </el-card> -->
        <el-card>
          <div slot="header">猪舍存栏</div>
          <el-table width="100%" :data="stockData" border  height="250">
            <el-table-column prop="columnName" label="猪舍" align="center" />
            <el-table-column prop="boar" label="公猪" align="center"/>
            <el-table-column prop="sow" label="母猪" align="center"/>
            <el-table-column prop="pig" label="肉猪" align="center"/>
          </el-table>
        </el-card>
        <el-card>
          <div slot="header">胎龄比率</div>
          <div id="gestational-age" style="height: 220px"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <ul class="stock">
              <li>
                <span class="number">{{ pigInfo.buildings }}</span>
                <span>猪场存栏</span>
              </li>
              <li>
                <span class="number">{{ pigInfo.sow }}</span>
                <span>母猪存栏</span>
              </li>
              <li>
                <span class="number">{{pigInfo.boar}}</span>
                <span>公猪存栏</span>
              </li>
              <li>
                <span class="number">{{pigInfo.pig}}</span>
                <span>肉猪存栏</span>
              </li>
            </ul>
          </div>
          <div style="display: flex">
            <div id="stock-left" style="height: 200px; width: 50%"></div>
            <div id="stock-right" style="height: 200px; width: 50%"></div>
          </div>
        </el-card>
        <el-card>
          <div id="temperature" style="height: 240px; margin-top: 10px"></div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6">
        <el-card>
          <div slot="header">今日行情</div>
          <div id="market" style="height: 220px;width: 100%;"></div>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  birthsRatio,
  boatState,
  buildsFarm,
  indexStock
} from "@/api/pig-statement/index.js";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      standard: [22, 19, 17, 15, 13, 10, 3, 1],
      boarType: [
        { value: 0, name: "返情" },
        { value: 0, name: "妊娠" },
        { value: 0, name: "流产" },
        { value: 0, name: "配种" },
        { value: 0, name: "断奶" },
        { value: 0, name: "哺乳" },
        { value: 0, name: "空杯" },
        { value: 0, name: "后备" },
      ],
      stockData: [],
      pigInfo:{}
    };
  },
  created() {
    this.getAgeData();
    this.getPigInfo();
    this.getStock();
    this.indexStock()
  },
  mounted() {
    this.createGestationalAge();
    this.createStockLeft();
    this.createStockRight();
    this.createTemperature();
  },
  methods: {
    async getAgeData() {
      let res = await birthsRatio({});
      if (res.code == 200) {
        res.data.forEach((item) => {
          this.actual[item.births] = item.actualThan.split("%")[0];
        });
        this.createGestationalAge();
      }
    },
    async getPigInfo() {
      let res = await boatState();
      if (res.code == 200) {
        res.data.forEach((resItem) => {
          this.boarType.forEach((item) => {
            if (resItem.name == item.name) {
              item.value = resItem.value;
              return;
            }
          });
        });
        this.createStockLeft();
      }
    },
    async getStock() {
      let res = await buildsFarm({ pageSize: 999, pageNum: 1 });
      if (res.code == 200) {
        this.stockData = res.data.list
      }
    },
    async indexStock() {
      let res = await indexStock()
      if (res.code == 200) {
        this.pigInfo = res.data
        this.createStockRight()
      }
    },
    createGestationalAge() {
      let chart = this.$echarts.getInstanceByDom(
        document.getElementById("gestational-age")
      );
      if (chart == null) {
        chart = this.$echarts.init(document.getElementById("gestational-age"));
      }
      let option = {
        legend: {
          data: ["实际比", "标准比"],
        },
        tooltip: {
          trigger: "axis",
          show: true,
          //formatter:'{b}胎'
        },
        xAxis: { type: "category", data: [0, 1, 2, 3, 4, 5, 6, "7+"] },
        yAxis: {},
        series: [
          {
            name: "实际比",
            data: this.actual,
            type: "bar",
            smooth: true,
          },
          {
            name: "标准比",
            data: this.standard,
            type: "bar",
            smooth: true,
          },
        ],
      };
      chart.setOption(option);
    },
    createStockLeft() {
      let chart = this.$echarts.getInstanceByDom(
        document.getElementById("stock-left")
      );
      if (chart == null) {
        chart = this.$echarts.init(document.getElementById("stock-left"));
      }
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br />数量：{c}<br /> 占比：{d}%",
        },
        legend: {
          right: "70%",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.boarType,
          },
        ],
      };
      chart.setOption(option);
    },
    createStockRight() {
      let chart = this.$echarts.getInstanceByDom(document.getElementById("stock-right"))
      if (chart == null) {
        chart = this.$echarts.init(document.getElementById("stock-right"));
      }
      
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br />数量：{c}<br /> 占比：{d}%",
        },
        legend: {
          left: "70%",
          // left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.pigInfo.boar, name: "公猪" },
              { value: this.pigInfo.sow, name: "母猪" },
              { value: this.pigInfo.pig, name: "肉猪" },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    createTemperature() {
      let chart = this.$echarts.init(document.getElementById("temperature"));
      let option = {
        title: {
          text: "未来一周温度变化",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: "30%",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
          },
        },
        series: [
          {
            name: "Highest",
            type: "line",
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "Lowest",
            type: "line",
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
            },
            markLine: {
              data: [
                { type: "average", name: "Avg" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "Max",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
  computed: {
    actual() {
      let arr = [];
      for (let i = 0; i < 8; i++) {
        arr.push(0);
      }
      return arr;
    }
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  border-radius: 6px;
  margin: 10px;
}

.production {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 33%;
    text-align: center;
    padding-bottom: 19px;
    padding-top: 2px;
    span {
      display: block;
    }
    .number {
      font-size: 26px;
      color: #40bef3;
    }
  }
}
.stock {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  li {
    width: 25%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 18px;
    span {
      display: block;
    }
    .number {
      font-size: 30px;
      color: #fdaa73;
    }
  }
}
</style>
